<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <title>拉勾作业</title>

    
  </head>
  <style>
  </style>
  <body>
    <div style="padding: 20px;">
        <button id="insert" class="btn btn-info" data-toggle="modal" data-target="#myModal">新增</button>
        <button id="delete" class="btn btn-info">删除</button>
        <button id="update" class="btn btn-info" >编辑</button>
        <button id="search" class="btn btn-info">查询</button>
        <input id="numSearch" type="text" placeholder="按工号查询">
        <input id="nameSearch" type="text" placeholder="按姓名查询">

        <table class="table table-responsive table-striped">
            <thead>
                <tr>
                    <th>序号</th>
                    <th>工号</th>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>密码</th>
                    <th>年龄</th>
                    <th>出生日期</th>
                </tr>

                <tbody id="tbody">
                    <tr class="info">
                        <td><input type="radio", name="check"></td>
                        <td class="num">1001</td>
                        <td class="xingming">张三</td>
                        <td>女</td>
                        <td>1234</td>
                        <td>29</td>
                        <td>1991-1-1</td>
                    </tr>

                    <tr class="warning">
                        <td><input type="radio", name="check"></td>
                        <td class="num">1002</td>
                        <td class="xingming">李四</td>
                        <td>女</td>
                        <td>1234</td>
                        <td>29</td>
                        <td>1991-1-1</td>
                    </tr>

                    <tr class="info">
                        <td><input type="radio", name="check"></td>
                        <td class="num">1003</td>
                        <td class="xingming"> 王五</td>
                        <td>女</td>
                        <td>1234</td>
                        <td>29</td>
                        <td>1991-1-1</td>
                    </tr>

                    <tr class="warning">
                        <td><input type="radio", name="check"></td>
                        <td class="num">1004</td>
                        <td class="xingming">李四</td>
                        <td>女</td>
                        <td>1234</td>
                        <td>26</td>
                        <td>1994-4-4</td>
                    </tr>
                </tbody>

            </thead>

        </table>
    </div>

    <div class="modal" id="myModal" backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">请输入员工信息</h4>
                </div>

                <div class="modal-body">
                    <form id="form">
                        <div class="form-group">
                            <label>工号</label>
                            <input id="gonghao" type="text" placeholder="请输入工号">
                        </div>

                        <div class="form-group">
                            <label>姓名</label>
                            <input id="name" type="text" placeholder="请输入姓名">
                        </div>

                        <div class="form-group">
                            <label>性别</label>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-primary">
                                    <input type="radio" name="gender" value="男">男
                                </label>
                                <label class="btn btn-primary">
                                    <input type="radio" name="gender" value="女">女
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>密码</label>
                            <input id="password" type="password" placeholder="请输入密码">
                        </div>

                        <div class="form-group">
                            <label>年龄</label>
                            <input id="age" type="text" placeholder="请输入年龄">
                        </div>

                        <div class="form-group">
                            <label>出生日期</label>
                            <input id="birthday" type="text" placeholder="请输入出生日期">
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button id="ensure" class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>

        </div>
    </div>


    <div class="modal" id="myModal1" backdrop="static">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">
                        <span>&times;</span>
                    </button>
                    <h4 class="modal-title">请输入员工信息</h4>
                </div>

                <div class="modal-body">
                    <form id="form">
                        <div class="form-group">
                            <label>工号</label>
                            <input id="gonghao1" type="text" placeholder="请输入工号">
                        </div>

                        <div class="form-group">
                            <label>姓名</label>
                            <input id="name1" type="text" placeholder="请输入姓名">
                        </div>

                        <div class="form-group">
                            <label>性别</label>
                            <div class="btn-group" data-toggle="buttons">
                                <label class="btn btn-primary">
                                    <input type="radio" name="gender1" value="男">男
                                </label>
                                <label class="btn btn-primary">
                                    <input type="radio" name="gender1" value="女">女
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label>密码</label>
                            <input id="password1" type="password" placeholder="请输入密码">
                        </div>

                        <div class="form-group">
                            <label>年龄</label>
                            <input id="age1" type="text" placeholder="请输入年龄">
                        </div>

                        <div class="form-group">
                            <label>出生日期</label>
                            <input id="birthday1" type="text" placeholder="请输入出生日期">
                        </div>
                    </form>
                </div>

                <div class="modal-footer">
                    <button id="ensure1" class="btn btn-info">确定</button>
                    <button class="btn btn-default" data-dismiss="modal">取消</button>
                </div>
            </div>

        </div>
    </div>


    <!-- jQuery (Bootstrap 的 JavaScript 插件需要引入 jQuery) -->
    <script src="js/jquery-3.3.1.min.js"></script>
    <!-- 包括所有已编译的插件 -->
    <script src="js/bootstrap.min.js"></script>

    <script>

        /*
        查询员工信息
        逻辑是如果工号和姓名都没填写，则显示所有的员工信息
        如果任意一个填写了，就用这个值区找员工
        如果都填了，就要找到两个都匹配的员工
        */

        $("#search").on('click',function(){
            var num = $("#numSearch").val();
            var name = $("#nameSearch").val();
            console.log(num+ name);
            if(num == "" && name == ""){
                $("tr").slideDown('fast');
            }else if(num == ""){
                
                var data;
                $(".xingming").each((index,elem) =>{
                    if(name == elem.textContent){
                        data = elem;
                    }
                    
                });
                if(data == null){
                    alert("找不到该员工的信息！")
                }else{
                    $(data).parent().siblings().slideUp('fast');
                }
            }else if(name == ""){
                var data;
                $(".num").each((index,elem) =>{
                    if(num == elem.textContent){
                        data = elem;
                    }
                    
                });
                if(data == null){
                    alert("找不到该员工的信息！")
                }else{
                    $(data).parent().siblings().slideUp('fast');
                }
            }else{
                var data;
                $(".num").each((index,elem) =>{
                    if(num == elem.textContent){
                        data = elem;
                    }
                    
                });
                if(data == null){
                    alert("找不到该员工的信息！")
                }else{
                    if($(data).parent().find(".xingming")[0].textContent != name){
                        alert("找不到符合条件的员工！")
                    }else{
                        $(data).parent().siblings().slideUp('fast');
                    }
                }
            }
            
        })

        /*
        删除员工的逻辑
        */
        $("#delete").on('click', function(){
            var num = $("input[name='check']:checked").val();
            if(num == null){
                alert("请先选择要删除的员工序号!")
            }else{
                $("input[name='check']:checked").parent().parent().remove();
            }

        })

        /*
        编辑员工的逻辑
        */
        $("#update").on('click',function(){
            var num = $("input[name='check']:checked").val();
            if(num == null){
                alert("请先选择要编辑的员工序号!")
            }else{
                var data = $("input[name='check']:checked").parent().siblings();
                console.log(data[0].textContent);
                $("#gonghao1").val(data[0].textContent);
                $("#name1").val(data[1].textContent) ;
                $("#age1").val(data[4].textContent) ;
                $("#password1").val(data[3].textContent) ;
                console.log(data[2].textContent == "女");
                if(data[2].textContent == "女"){
                    $("input[type='radio'][name='gender1'][value='女']").attr('checked','checked');
                }else{
                    $("input[type='radio'][name='gender1'][value='男']").attr('checked','checked');

                }
                $("#birthday1").val(data[5].textContent);
                $("#myModal1").modal();
            }
            
        })

        /*
        编辑员工时的信息输入
        */
        $("#ensure1").on('click',function(){
            var gonghao = $("#gonghao1").val();
            var name = $("#name1").val();
            var age = $("#age1").val();
            var password = $("#password1").val();
            var sex = $("input[name='gender1']:checked").val();
            var birthday = $("#birthday1").val();
            if(gonghao == "" || checkNum(gonghao) == false){
                alert("请输入工号！")
            }else if(name == ""){
                alert("请输入姓名!")
            }else if(age == "" || checkNum(age) == false){
                alert("请输入年龄！")
            }else if(password == ""){
                alert("请输入密码！")
            }else if(sex == null){
                alert("请选择性别！")
            }else if(birthday == "" || checkBirthday(birthday) == false){
                alert("请输入生日！")
            }else{
                var data = $("input[name='check']:checked").parent().siblings();
                data[0].textContent=gonghao;
                data[1].textContent=name;
                data[2].textContent=sex;
                data[3].textContent=password;
                data[4].textContent=age;
                data[5].textContent=birthday;
                $("#myModal1").modal("hide");
                $("#form")[0].reset();
                
            }
            
        })
        


        /*
        新增员工时的数据输入
        */
        $("#ensure").on('click',function(){
            var gonghao = $("#gonghao").val();
            var name = $("#name").val();
            var age = $("#age").val();
            var password = $("#password").val();
            var sex = $("input[name='gender']:checked").val();
            var birthday = $("#birthday").val();
            console.log(checkBirthday(birthday));
            if(gonghao == "" || checkNum(gonghao) == false){
                alert("请输入工号！")
            }else if(name == ""){
                alert("请输入姓名!")
            }else if(age == "" || checkAge(age) == false){
                alert("请输入年龄！")
            }else if(password == ""){
                alert("请输入密码！")
            }else if(sex == null){
                alert("请选择性别！")
            }else if(birthday == "" || checkBirthday(birthday) == false){
                alert("请输入正确的生日！")
            }else{
                var color;
                if($("#tbody").children().length % 2 == 1){
                    color = "warning";
                }else{
                    color = "info";
                }
                console.log($("#tbody").children().length);
                $("#tbody").append(
                    "<tr class='"+color+"'>"+
                        "<td><input type='radio', name='check'></td>"+
                        "<td class='num'>"+gonghao+"</td>"+
                        "<td class='xingming'>"+name+"</td>"+
                        "<td>"+sex+"</td>"+
                        "<td>"+password+"</td>"+
                        "<td>"+age+"</td>"+
                        "<td>"+birthday+"</td>"
                    +"</tr>");
                $("#myModal").modal("hide");
                $("#form")[0].reset();
                
            }
            
        })


        /*
        生日，年龄，工号的校验
        */
        function checkBirthday(day){
            var pattern = /^\d{4}[-\ ]\d{1,2}[-\ ]\d{1,2}$/;
            console.log("check"+pattern.test(day));
            return pattern.test(day);
        }

        function checkAge(age){
            var pattern = /\d+/;
            return pattern.test(age);
        }

        function checkNum(num){
            var pattern = /\d+/;
            return pattern.test(num);
        }


    </script>

    
  </body>
</html>
